'use client';

import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import { WechatOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useMessage } from '@/hooks/useMessage';
import { useAuth } from '../../components/AuthProvider';

interface BindWechatModalProps {
  userInfo: any;
  onClose: () => void;
  onSuccess: () => void;
}

const BindWechatModal: React.FC<BindWechatModalProps> = ({
  userInfo,
  onClose,
  onSuccess
}) => {
  const [loading, setLoading] = useState(false);
  const message = useMessage();
  const { bindWechat } = useAuth();

  // 模拟微信绑定扫码
  const handleWechatScan = async () => {
    setLoading(true);
    
    try {
      const mockOpenid = `wx_bind_${Date.now()}`;
      const success = await bindWechat(userInfo.userId, mockOpenid);
      
      if (success) {
        message.success('绑定成功，登录中...');
        setTimeout(() => {
          onSuccess();
        }, 1000);
      } else {
        message.error('绑定失败，请重试');
      }
    } catch (error) {
      console.error('绑定失败:', error);
      message.error('绑定失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      open={true}
      onCancel={onClose}
      footer={null}
      width={400}
      centered
      closable={false}
    >
      <div className="p-4">
        <div className="flex items-center mb-6">
          <Button
            type="text"
            icon={<ArrowLeftOutlined />}
            onClick={onClose}
            className="mr-2"
          />
          <h2 className="text-lg font-medium mb-0">首次登录请绑定微信</h2>
        </div>

        <div className="text-center py-8">
          <div className="w-48 h-48 mx-auto mb-6 border-2 border-gray-200 rounded-lg flex items-center justify-center bg-gray-50">
            {/* 微信绑定二维码占位 */}
            <div 
              className="w-40 h-40 bg-gray-300 rounded flex items-center justify-center cursor-pointer hover:bg-gray-400 transition-colors"
              onClick={handleWechatScan}
            >
              <WechatOutlined className="text-4xl text-gray-500" />
            </div>
          </div>
          
          <Button
            type="primary"
            size="large"
            loading={loading}
            onClick={handleWechatScan}
            className="w-full"
            style={{ backgroundColor: '#07c160', borderColor: '#07c160' }}
          >
            {loading ? '绑定中...' : '确认绑定'}
          </Button>
          
          <p className="text-gray-500 text-sm mt-4">
            请使用微信扫描二维码完成绑定
          </p>
        </div>
      </div>
    </Modal>
  );
};

export default BindWechatModal; 